<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Bamboo  
Description: A two-column, fixed-width design with dark color scheme.
Version    : 1.0
Released   : 20090820

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Chore Organizer</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript">
<!--
function insertChore()
{
  var elSel = document.getElementById('selectc');
    var days = document.getElementById('frequency');
  var theName = document.getElementById('choreTitle');
  if (elSel.selectedIndex >= -1)
  {
    var elOptNew = document.createElement('option');
    elOptNew.text = theName.value+'  '+days.value;
    elOptNew.value = theName.value;
    var elOptOld = elSel.options[0];  
    try {
      elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
    }
    catch(ex) {
      elSel.add(elOptNew, elSel.selectedIndex); // IE only
    }
  }
}

function removeChore()
{
  var elSel = document.getElementById('selectc');
  var i;
  for (i = elSel.length - 1; i>=0; i--) {
    if (elSel.options[i].selected ) {
      elSel.remove(i);
    }
  }
}

function insertOptionBefore()
{
  var elSel = document.getElementById('selectX');

  var theName = document.getElementById('Firstname');
  if (elSel.selectedIndex >= -1)
  {
    var elOptNew = document.createElement('option');
    elOptNew.text = theName.value;
    elOptNew.value = theName.value;
    var elOptOld = elSel.options[0];  
    try {
      elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
    }
    catch(ex) {
      elSel.add(elOptNew, elSel.selectedIndex); // IE only
    }
  }
}

function removeOptionSelected()
{
  var elSel = document.getElementById('selectX');
  var i;
  for (i = elSel.length - 1; i>=0; i--) {
    if (elSel.options[i].selected ) {
      elSel.remove(i);
    }
  }
}


//-->
</script>
</head>
<body>
<div id="wrapper">
	<div id="header-wrapper">
	<div id="header">
		<div id="logo">
			<h1><a href="#">Chore Organizer   </a></h1>
            <p >Logged in as: blah</p><br />
            <p>(<a style="color:#B94E0E;" href="#">Logout</a>)</p>
		</div>
	</div>
	</div>
	<!-- end #header -->
	<div id="menu">
		<ul>
			<li class="current_page_item">
            <a style="padding-left:40px;" href="index.html">Home</a></li>
			<li><a style="	background: #FFF; color:#B94E0E; font-weight:bold;"  href="interface.html">Edit Household</a></li>
			<li><a href="#">Manual allocate</a></li>
			<li><a href="#">Contact</a></li>
            <li><a href="#">Help</a></li>
		</ul>
	</div>
	<!-- end #menu -->
	<div id="page">
	<div id="page-bgtop">
	<div id="page-bgbtm">
		<div id="content">
			<div class="post">
            <h2 class="title">Edit Household</h2>
            <hr />
			<h3 class="title">Edit Occupants</h3>
                <table  cellspacing="0" border="0"  cellpadding="0"> 
                  <tr>
                      <td>
                          <form >Name (<a href="">?</a>):<br />
                            <input id="Firstname" type="text" value=""/> (e.g John Smith)<br />
                            <input type="button" value="Add" onclick="insertOptionBefore();" />
                            <br/> <br />
                          
                          </form>
                      </td> 
                 </tr>
                    
                 <tr> 
                   <td>
                        <form>
                        Occupant
                         list(<a href="">?</a>):  <br />                      
                        <select id="selectX" style="width:150px;" multiple="multiple"/>        
                        </select>
                        <br />
                        <input type="button" value="Remove" onclick="removeOptionSelected();" />
                        </form> 
                   </td>
                </tr>
                </table>
			<hr />
            <h3 class="title">Edit Chores</h3>
                            <table  cellspacing="0" border="0"  cellpadding="0"> 
                  <tr>
                      <td>
                          <form >Chore title (<a href="">?</a>):<br />
                            <input id="choreTitle" type="text" value=""/>(e.g Sweeping)<br />
								Frequency of chore (days) (<a href="">?</a>):<br />
                            <input id="frequency" type="text" value=""/>(e.g 14)<br />
                            <input type="button" value="Add" onclick="insertChore();" />
                          
                          </form>
                      </td> 
                 </tr>

                 <tr> 
                   <td>
                        <form>
                        Chore
                         list(<a href="">?</a>):  <br />                      
                        <select id="selectc" style="width:150px;" multiple="multiple"/>        
                        </select>
                        <br />
                        <input type="button" value="Remove" onclick="removeChore();" />
                        </form> 
                   </td>
                </tr>
                </table>
			<hr />
            
            <input style="float:right;" type="button" value="Submit" onclick="insertChore();" />
			</div>
			<div class="post">
			</div>
		<div style="clear: both;">&nbsp;</div>
		</div>
		<!-- end #content -->
		<div id="sidebar">
			<ul>
				<li>
					<h2>Shoutbox</h2>
                    <textarea rows="10" id="message">**Remember that messages are deleted weekly.</textarea>
                    <input id="Firstname" type="text" value="Enter name here."/>
                    <textarea id="message">Enter message here.</textarea>
                    <input type="button" value="Submit"/>
				</li>
				<li>
					<h2>Warnings</h2>
					<ul>
						<li>- There are no occupants or chores defined. Please go to "Edit Household" to add them.</li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- end #sidebar -->
		<div style="clear: both;">&nbsp;</div>
	</div>
	</div>
	</div>
	<!-- end #page -->
</div>
<div id="footer-wrapper">
	<div id="footer">
	</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>
